<template>
    <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
					<el-input v-model="filters.f_username" placeholder="姓名"></el-input>
				</el-form-item>
                <el-form-item>
					<el-input v-model="filters.f_userid" placeholder="编号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="doGetTabState">查询</el-button>
				</el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24"  style="padding-bottom: 0px;" v-loading="loading" element-loading-text="正在查询阀门状态，请稍后">
            <el-form :inline="true" :model="tabstate">
                <el-form-item label="当前阀门状态">
					<el-col :span="10">
                        <el-input v-model="tabstate.state" :disabled="true"></el-input>
                    </el-col>
				</el-form-item>
                <el-form-item>
					<el-button :disabled="isOpenDisabled" type="primary" v-model="tabstate.opentab" @click="doSetTabState">开阀</el-button>
				</el-form-item>
                <el-form-item>
					<el-button :disabled="isCloseDisabled" type="primary" v-model="tabstate.closetab" @click="doSetTabState">关阀</el-button>
				</el-form-item>
            </el-form>
        </el-col>
    </section>
</template>

<script>
export default {
    data(){
        return {
            loading:false,
            isOpenDisabled:false,
            isCloseDisabled:false,
            filters:{
                f_username: '',
                f_userid: ''
            },
            tabstate:{
                state:'未知'
            }
        }
    },
    methods: {
        doGetTabState(){
            this.loading =true;
            //获取阀门状态 修改界面
            alert("获取阀门状态："+this.tabstate.state);
            if(this.tabstate.state=='未知'){
                alert("开阀");
                this.tabstate.state ='开阀';
            }else if (this.tabstate.state=='开阀'){
                 alert("关阀");
                this.tabstate.state='关阀';
            }
            if(this.tabstate.state=='开阀'){
                this.isOpenDisabled= true;
                 this.isCloseDisabled= false;
            }else if(this.tabstate.state=='关阀'){
                this.isCloseDisabled= true;
                 this.isOpenDisabled= false;
            }
            
            this.loading =false;
        
        },
        doSetTabState(){
             alert("修改阀门状态");
            if(this.tabstate.state=='开阀'){
                this.tabstate.state='关阀';
            }else if(this.tabstate.state=='关阀'){
                 this.tabstate.state='开阀';
            }
            //修改阀门状态 修改界面
           
        }
    }
}
</script>

<style  scoped>

</style>
